<template>
    <div class="container">
        <a-modal
                :open="open"
                :footer="null"
                :closable="false"
                :width="400"
                :body-style="bodyStyleModal"
                style="top:100px"
                @cancel="onclose"
        >
            <a-input v-model:value="userCode" class="inputUserCode" placeholder="请输入用户编码"></a-input>
            <div style="margin: 5px 0;background-color: black;height: 1px;width: 280px;position: relative;top: 5px;"></div>
            <div class="buttonDiv">
                <a-button shape="round" class="addUserBtn" @click="addUser">新增用户</a-button>
                <a-button shape="round" class="confirmBtn" @click="confirmUser">确定</a-button>
            </div>

        </a-modal>
        <key-board :open="openKey" ref="keyBoard" @getKeyBoardInput="getKey" @handleOk="confirmUser"
                   @closeKeyBoard="closeKeyBoard"  ></key-board>
    </div>
</template>
<script>


import axios from "axios";
import {message} from "ant-design-vue";
import API_BASE_URL from "../../config.js";
import store from "@/store";
import KeyBoard from "@/components/keyBoard.vue";
import {getAction, getActionWithHeader, postActionWithHeader} from "@/manage";

export default {
    name: 'userModal',
    props: [],
    components: {KeyBoard},
    data() {
        return {
            show: false,
            bodyStyleModal: ['margin:-20px -24px', 'height:200px', 'display:grid', 'justify-content:center', 'align-items:center'],
            search: '',
            open: false,
            openKey:false,

            userCode: '',
            //当前用户编码
            currentUserCode: '',
            //主体样式
            body: {
                'background-color': '#305f79'
            },
            openWifi: false,
            bodyStyle: {
                'font-size': '40px',
            },
            //大小写
            capsLock: false,
            pressBtnBack: ['background-color:#30f8ff', ''],
            bgColor: {
                point1: '',              //--.--小数点
                point2: '',              //--.--小数点
                exclamationSign: '',     //--!--感叹号
                numberSign: '',          //--#--井号
                dollarSign: '',          //--$--美元符号
                percentSign: '',         //--%--百分号
                exponentSign: '',        //--^--乘方符号
                and: '',
                starSign: '',            //--*--星号
                leftBracket: '',         //--(--左括号
                rightBracket: '',        //--)--右括号
                slash: '',               //--/--斜杠
                underline: '',           //--_--下划线
                minus: '',               //-----减号
                equals: '',              //--=--等号
                at: '',                  //--@--
                comma: '',               //--,--逗号
                space: '',               //-- --空格
                Q: '', q: '',
                W: '', w: '',
                R: '', r: '',
                T: '', t: '',
                Y: '', y: '',
                U: '', u: '',
                I: '', i: '',
                O: '', o: '',
                P: '', p: '',
                A: '', a: '',
                S: '', s: '',
                D: '', d: '',
                F: '', f: '',
                G: '', g: '',
                H: '', h: '',
                J: '', j: '',
                K: '', k: '',
                L: '', l: '',
                Z: '', z: '',
                X: '', x: '',
                C: '', c: '',
                V: '', v: '',
                B: '', b: '',
                N: '', n: '',
                M: '', m: '',
                one: '',
                two: '',
                three: '',
                four: '',
                five: '',
                six: '',
                seven: '',
                eight: '',
                nine: '',
                zero: ''
            },

            url: {
                addUser: "http://api.cgi-gz.com/store-testing-users",
                getUser: "http://api.cgi-gz.com/store-testing-users",
            }
        }
    },
    methods: {
        //获取键盘输入
        getKey(val) {
            this.userCode = val
        },
        addUser() {
            let param = {
                "card_number": this.userCode,
                // "age": "10后", //检测人年龄
                "serial": store.state.deviceCode,//设备号
                // "gender": "woman", //man,woman，other
            }
            if (this.userCode === 'root') {
                message.error("添加失败，用户为管理员账户")
            } else {
                postActionWithHeader(this.url.addUser, param).then((res) => {
                    if (res.status === 200) {
                        //设置当前用户信息
                        store.commit('setUsername', {value: this.userCode})
                        // store.commit('setUserCode',{value:this.userCode})
                        store.commit('setUserID', {value: res.data.data.id})
                        store.commit('setUUID', {value: res.data.data.uuid})
                        store.commit('setIsRoot', {value: false})
                        console.log(res.data.data.id)
                        console.log(res.data.data.uuid)
                        message.success("用户已成功添加，并已作为当前使用的用户")
                    } else {
                        message.error("遇到了意料之外的错误")
                    }
                    // this.userCode = ''
                    console.log(res)
                    console.log(res.status)
                }).catch((err) => {
                    //用户已经存在
                    if (err.response.data.status_code === 409) {
                        message.error(err.response.data.message)
                    }
                })
            }

        },
        confirmUser() {
            let param = {
                "page": 1,//页码
                "per_page": 10,//每页显示数量
                "key": this.userCode///搜索关键字
            }
            getActionWithHeader(this.url.getUser,param).then((res) => {
                let exitUsers = res.data.data.list
                if (exitUsers.length===0){
                    message.error("用户不存在")
                }
                if (res.status === 200){
                    if (this.userCode === 'root'){
                            //设置当前会员信息为管理员
                            store.commit('setUsername',{value:store.state.rootUserName})
                            store.commit('setUserID',{value:store.state.rootId})
                            store.commit('setUserCode',{value:store.state.rootUserCode})
                            store.commit('setIsRoot',{value:true})
                            message.success("已成功选择管理员用户")
                            this.open = false
                        this.openKey = false
                    }else {
                        for (let i = 0; i < exitUsers.length; i++) {
                            if (this.userCode === exitUsers[i].card_number) {
                                store.commit('setIsRoot', {value: false})
                                store.commit('setUserCode', {value: exitUsers[i].card_number})
                                store.commit('setUsername', {value: exitUsers[i].card_number})
                                store.commit('setUserID', {value: exitUsers[i].id})
                                store.commit('setUUID', {value: exitUsers[i].uuid})
                                message.success("已成功选择用户" + this.userCode)
                                this.open = false
                                this.openKey = false
                                break;
                            }
                        }
                    }

                }else {
                    message.error("遇到了意料之外的错误")
                }
            })
        },
        onclose() {
            this.open = false
            this.openKey = false
            this.userCode = ''
            console.log(this.userCode)
            console.log("我挂壁了")
        },
        closeKeyBoard(){
            this.openKey = false
        }
    }
}
</script>

<style scoped>

@font-face {
    font-family: 'siyuan';
    src:url('../assets/fontType/SourceHanSansCN-Regular.otf');
}

.container {
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: floralwhite;
}

.inputUserCode {
    border-style: hidden;
    width: 295px;
    font-size: 30px;
    font-weight: 600;
    position: relative;
    text-align: center;
    top: 50px;
    margin-top: -25px;
}

.inputUserCode::placeholder {
    font-size: 20px;
}

.buttonDiv {
    display: flex;
    justify-content: center;
    gap: 60px;
    position: relative;
    bottom: 10px;
}

.addUserBtn {
    width: 115px;
    height: 48px;
    background: linear-gradient(38deg, #7776ff 40%, #ae2cf1);
    color: white;
    font-size: 18px;
    font-family: siyuan,serif;
}

.confirmBtn {
    width: 115px;
    height: 48px;
    background: #4db0e7;
    color: white;
    font-size: 18px;
    letter-spacing: -2px;
}

.button {
    width: 59px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #4db0e7;
    font-weight: 600;
    font-size: 19px;
    background: rgba(0, 0, 0, 0);
    color: white;
}

.button1 {
    width: 59px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid #4db0e7;
    font-weight: 600;
    font-size: 19px;
    background: rgba(0, 0, 0, 0);
    color: white;
    padding: 1px 15px;
}

</style>
  